<%--
  Created by IntelliJ IDEA.
  User: zhf
  Date: 2021/2/8
  Time: 19:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.zhf.entity.Page" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@taglib prefix="fix" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"
          +request.getServerName()+":"
          +request.getServerPort()
          +path+"/";
%>
<html>
<head>
  <base href="<%=basePath %>"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>主页</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
          integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
          crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/base.css">
  <style type="text/css">
  </style>
</head>

<body>
<div class="container">
  <div style="height: 80px">
    <jsp:include page="header.jsp">
      <jsp:param name="currentPage" value="index.jsp"/>
    </jsp:include>
  </div>
  <form name="listForm" id="listForm" method="post" action="?">
    <table class="table table-responsive">
      <caption>
        <h2>学生信息管理系统 - 学生管理</h2>
      </caption>
      <caption>
        <button type="button" class="btn btn-info" id="user_add" data-toggle="modal" data-target="#myModal">新增</button>
        <button  class="btn btn-info" id="user_delete">删除</button>
        <button type="button" class="btn btn-info" id="user_edit" data-toggle="modal" data-target="#myModal">编辑</button>
        <button class="btn btn-info" id="user_find">查询</button>
        <input type="text" id="s_code" placeholder="按学号查询" style="width: 130px;" name="queryCode">
        <input type="text" id="s_name" placeholder="按姓名查询" style="width: 130px;" name="queryName">
      </caption>
      <thead>
      <tr>
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>邮箱</th>
        <th>备注</th>
  <%--      <th>出生日期</th>--%>
      </tr>
      </thead>
      <tbody id="tbody">
        <c:forEach items="${requestScope.students}" var="student" varStatus="status">
          <c:choose>
            <c:when test="${status.index%2 != 0 }">
              <tr class="info">
            </c:when>
            <c:otherwise>
              <tr class="warning">
            </c:otherwise>
          </c:choose>
            <td style='width:80px;'><input type='checkbox' name="studentId" value="${student.id}"></td>
            <td id='id'>${student.id}</td>
            <td id="name">${student.name}</td>
            <td id="gender">${student.gender}</td>
            <td id="birthday">${student.birthDay}</td>
            <td id="email">${student.email}</td>
            <td id="remark">${student.remark}</td>
          </tr>
        </c:forEach>
      </tbody>
    </table>
  </form>
  <nav aria-label="Page navigation" style="text-align: center;" id="pageComponent">
    <ul class="pagination">
      <c:choose>
        <c:when test="${requestScope.page.currentPage eq 1 }">
          <li class="disabled"><a href="#" aria-label="Previous">上一页</a></li>
        </c:when>
        <c:otherwise>
          <li><a href="index.do?currentPage=${requestScope.page.currentPage-1}" aria-label="Previous">上一页</a></li>
        </c:otherwise>
      </c:choose>
      <c:forEach begin="1" end="${requestScope.page.totalPage}" step="1" var="i">
        <c:choose>
          <c:when test="${i eq requestScope.page.currentPage}">
            <li class="active"><a href="index.do?currentPage=${requestScope.page.currentPage}">${i}</a></li>
          </c:when>
          <c:otherwise>
            <li><a href="index.do?currentPage=${i}">${i}</a></li>
          </c:otherwise>
        </c:choose>
      </c:forEach>
      <c:choose>
        <c:when test="${requestScope.page.currentPage eq requestScope.page.totalPage}">
          <li class="disabled"><a href="#" aria-label = "Next" onclick="return false">下一页</a> </li>
        </c:when>
        <c:otherwise>
          <li>
            <a href="index.do?currentPage=${requestScope.page.currentPage+1}">下一页</a>
          </li>
        </c:otherwise>
      </c:choose>
    </ul>
  </nav>

</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="modalLabel" data-backdrop="static" aria-hidden="true">
  <div class="modal-dialog" id="modalDialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
          <span>&times;</span>
        </button>
        <h4 class="modal-title" id="modalLabel">
          新增用户
        </h4>
      </div>
    <form action="?" method="post" id="insertOrUpdStudent" name="insertOrUpdStudent">
      <div class="modal-body" id="modal-body">
        <label for="m_code">学号:</label>
        <input type="text" class="form-control" id="m_code" name="id" placeholder="请输入学号" required="required">
        <label for="m_userName">姓名:</label>
        <input type="text" class="form-control" id="m_userName" name="name" placeholder="请输入姓名"  required="required">
        <label for="m_sex">性别:</label>
        <input type="text" class="form-control" id="m_sex" name="gender" placeholder="请输入性别"  required="required">
        <label for="m_birthday">出生日期:</label>
        <input type="date" class="form-control" id="m_birthday" name="birthDay" placeholder="请输入出生日期"  required="required">
        <label for="m_email">邮箱:</label>
        <input type="email" class="form-control" id="m_email" name="email" placeholder="请输入邮箱"  required="required">
        <label for="m_remark">备注:</label>
        <input type="text" class="form-control" id="m_remark" name="remark" placeholder="请输入备注"  required="required">
        <input type="hidden" name="currentPage" value="${requestScope.page.currentPage}" />
      </div>
      <div class="modal-footer">
        <button id="save" class="btn btn-primary" data-dismiss="modal">保存
        </button>
      </div>
    </form>

    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

<!-- 这里需要引入相关的js，很重要，请记住 -->
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/employeeManage.js"></script>
<script>
  $(function(){

    // initTable();
    $("#modalDialog").draggable();//为模态对话框添加拖拽
    $("#myModal").css("overflow", "hidden");//禁止模态对话框的半透明背景滚动
    if(${ requestScope.code ne null } && ${requestScope.msg ne null}){
      alert("${requestScope.msg}");
    }

    if(${requestScope.displayPageComponent ne null} && ${requestScope.displayPageComponent eq "none"})
      $("#pageComponent").hide();
    else  $("#pageComponent").show();


  });
</script>

</body>
</html>
